import {
  LockOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { Tabs } from 'antd';
import React, {useEffect} from 'react';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import { useIntl, connect, FormattedMessage, history } from 'umi';
import styles from './index.less';


const Login = (props) => {

  useEffect(() => {
    // 判断是否已登录
    const userInfo = JSON.parse(localStorage.getItem('userInfo'))
    // 有时候会产生一个错误的userInfo , 所以得 多层判断
    if(userInfo && userInfo.email) history.replace('/')
  }, [])

  const { submitting } = props;
  const intl = useIntl();

  const handleSubmit = (values) => {
    const { dispatch } = props;
    dispatch({
      type: 'login/login',
      payload: { ...values },
    });
  }

  return (
    <div className={styles.main}>
      <ProForm
        initialValues={{
          autoLogin: true,
        }}
        submitter={{
          render: (_, dom) => dom.pop(),
          submitButtonProps: {
            loading: submitting,
            size: 'large',
            style: {
              width: '100%',
            },
          },
        }}
        // 收集表单验证通过的数据
        onFinish={(values) => {
          handleSubmit(values);
          return Promise.resolve();
        }}
      >
        <Tabs activeKey='account'>
          <Tabs.TabPane
            key="account"
            tab={intl.formatMessage({
              id: 'pages.login.accountLogin.tab',
              defaultMessage: 'Account password login',
            })}
          />
        </Tabs>

          <>
            {/* 输入用户名 */}
            <ProFormText
              name="email"
              fieldProps={{
                size: 'large',
                prefix: <UserOutlined className={styles.prefixIcon} />,
              }}
              placeholder='邮箱：super@a.com'
              rules={[
                {
                  required: true,
                  message: (
                    // 国际化处理（验证不通过的提示信息）
                    <FormattedMessage
                      id="pages.login.username.required"
                      defaultMessage="Please enter user name!"
                    />
                  ),
                },
                {
                  type: 'email',
                  message: '请输入正确的邮箱格式!'
                }
              ]}
            />
            {/* 输入密码 */}
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined className={styles.prefixIcon} />,
              }}
              placeholder='密码：123123'
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="pages.login.password.required"
                      defaultMessage="Please enter password！"
                    />
                  ),
                },
              ]}
            />
          </>

      </ProForm>

    </div>
  )
}


export default connect(({ login, loading }) => ({
  userLogin: login,
  submitting: loading.effects['login/login'],
}))(Login);
